<template>
	<s-layout title="推广截图" :statusBarColor="'#F6F6F6'" :bgStyle="{
		color:'#F6F6F6'
	}" color='#333333' :opacityBgUi="'bg-record'">
		<view class="upload-box">
			<view class="upload-title ss-flex justify-between">
				<view class="left">推广截图</view>
				<view class="right" @click="jump">审核记录</view>
			</view>
			<view class="upload-image ss-m-t-20">
				<view class="upload-image-choose ss-flex flex-column justify-center align-center" @click="onChoose"
					v-if="!image">
					<uni-icons type="plusempty" size="28" color="rgba(108, 108, 108, .5)"></uni-icons>
					<view class="ss-m-t-5">推广截图</view>
				</view>
				<view class="upload-image-choose ss-flex flex-column justify-center align-center" v-else>
					<image class="content" :src="image" mode="aspectFit"></image>
					<image class="close"
						src="https://liuliangbenben.oss-cn-hangzhou.aliyuncs.com/mengchong/pint-upload-close.png"
						@click="close"></image>
				</view>
			</view>
		</view>
		<view class="claim">
			<view class="title">积分任务审核要求：</view>
			<view class="item ss-m-t-15">1.统一用户一个月内只能发布领取六次任务奖励</view>
			<view class="item ss-m-t-10">2.同一用户不能多次提交发布的同一条平台推广内容</view>
			<view class="item ss-m-t-10">3.多个用户不能提交发布同一条的平台推广内容</view>
			<view class="item ss-m-t-10">4.发布内容必须是提交申请当天才可审核通过</view>
			<view class="item ss-m-t-10">5.发布后需要保留发布内容最少三天</view>
			<view class="item ss-m-t-10">6.发布的内容(图文/视频)质量不同获得的积分也不同</view>
			<view class="item ss-m-t-10">发布图文内容：10分</view>
			<view class="item ss-m-t-10">发布视频内容：20分</view>
			<view class="item ss-m-t-10">发布推广二维码：50分</view>
		</view>
		<view style="width:100%;height:160rpx;"></view>
		<view class="btn-box">
			<view class="content ss-flex justify-center align-center ss-safe-bottom">
				<view @click="submit">提交资料</view>
			</view>
		</view>
	</s-layout>
</template>

<script setup>
	import {
		computed,
		reactive,
		ref
	} from 'vue';
	import {
		onLoad
	} from '@dcloudio/uni-app';
	import sheep from '@/sheep';
	// #ifdef APP
	import {
		showAuditModal
	} from '@/sheep/hooks/useAudit.js'
	// #endif

	const image = ref('')

	const submit = async () => {
		if (image.value.length < 1) {
			return 
		}
		const {
			error,
			data,
			msg
		} = await sheep.$api.point.extend({
			image: image.value,
			source:''
		})

		if (error === 0) {
			image.value = ''
		}

		uni.showToast({
			title: msg,
			icon: 'none',
			duration: 2000
		});
	}

	const jump = () => {
		sheep.$router.go('/pages/point/examineRecord');
	}

	const close = () => {
		image.value = ''
	}

	const onChoose = () => {
		// #ifdef APP
		showAuditModal('WRITE_EXTERNAL_STORAGE,CAMERA', () => {
			uni.chooseImage({
				count: 1,
				success(res) {
					upload(res.tempFilePaths[0])
				}
			});
		}, null, false)
		// #endif
		// #ifdef MP || H5
		uni.chooseImage({
			count: 1,
			success(res) {
				upload(res.tempFilePaths[0])
			}
		});
		// #endif
	}

	const upload = async (img) => {
		const res = await sheep.$api.app.upload(img)
		image.value = res.fullurl
	}
</script>

<style lang="scss" scoped>
	view {
		box-sizing: border-box;
	}

	.upload-box {
		width: 702rpx;
		height: 586rpx;
		border-radius: 16rpx;
		background: #FFFFFF;
		margin: 0 auto;
		padding: 20rpx;

		.upload-title {
			.left {
				font-family: Source Han Sans;
				font-size: 32rpx;
				font-weight: bold;
				color: #323233;
			}

			.right {
				font-family: PingFang SC;
				font-size: 20rpx;
				color: #3D3D3D;
			}
		}

		.upload-image-choose {
			width: 330rpx;
			height: 472rpx;
			border-radius: 10rpx;
			background: rgba(224, 224, 232, .3);
			font-family: PingFang SC;
			font-size: 30rpx;
			color: rgba(108, 108, 108, .5);
			position: relative;

			.content {
				width: 330rpx;
				height: 472rpx;
				border-radius: 10rpx;
			}

			.close {
				position: absolute;
				right: -10rpx;
				top: -10rpx;
				width: 32rpx;
				height: 32rpx;
			}
		}
	}

	.claim {
		width: 702rpx;
		border-radius: 16rpx;
		background: #FFFFFF;
		margin: 20rpx auto 0;
		padding: 20rpx;

		.title {
			font-family: PingFang SC;
			font-weight: 600;
			font-size: 28rpx;
			font-variation-settings: "opsz" auto;
		}

		.item {
			font-family: PingFang SC;
			font-weight: 400;
			font-size: 24rpx;
			font-variation-settings: "opsz" auto;
		}
	}

	.btn-box {
		width: 100%;
		position: fixed;
		left: 0;
		bottom: 0;
		padding-bottom: 30rpx;

		.content {
			view {
				width: 682rpx;
				height: 96rpx;
				border-radius: 60rpx;
				background: #47DFBD;
				font-family: Source Han Sans;
				font-size: 32rpx;
				font-weight: normal;
				line-height: 96rpx;
				text-align: center;
				color: #FFFFFF;
			}
		}
	}
</style>